<template>
  <div class="exercise-list-page">
    <van-nav-bar title="练习题库" left-text="返回" left-arrow @click-left="router.back()" />
    <div class="category-tabs">
      <van-tabs v-model:active="activeCategory">
        <van-tab v-for="cat in categories" :title="cat" :key="cat">
          <div class="exercise-list">
            <van-cell
              v-for="item in filteredExercises(cat)"
              :key="item.id"
              :title="item.title"
              :label="item.desc"
              is-link
              @click="goDetail(item.id)"
            />
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 题库数据（可替换为接口获取）
const exercises = [
  {
    id: 1,
    title: '两数之和',
    desc: '给定两个整数，输出它们的和。',
    category: '基础语法',
    content: `### 题目描述
给定两个整数 a 和 b，输出它们的和。

**输入格式**
两个整数 a 和 b，空格分隔。

**输出格式**
一个整数，表示 a+b 的结果。

**样例输入**
\`\`\`
3 5
\`\`\`

**样例输出**
\`\`\`
8
\`\`\`
`,
    judge: (input, output) => {
      // input: "3 5", output: "8"
      const [a, b] = input.trim().split(/\s+/).map(Number)
      return String(a + b) === output.trim()
    },
    defaultInput: '3 5',
    defaultAnswer: '8'
  },
  {
    id: 2,
    title: '判断回文字符串',
    desc: '判断输入的字符串是否为回文。',
    category: '字符串',
    content: `### 题目描述
输入一个字符串，判断它是否为回文字符串（正着反着都一样）。

**输入格式**
一行字符串。

**输出格式**
如果是回文输出 "Yes"，否则输出 "No"。

**样例输入**
\`\`\`
abcba
\`\`\`

**样例输出**
\`\`\`
Yes
\`\`\`
`,
    judge: (input, output) => {
      const s = input.trim()
      const isPal = s === s.split('').reverse().join('')
      return (isPal ? 'Yes' : 'No') === output.trim()
    },
    defaultInput: 'abcba',
    defaultAnswer: 'Yes'
  }
]

const categories = Array.from(new Set(exercises.map(e => e.category)))
const activeCategory = ref(categories[0])

const filteredExercises = (cat) => exercises.filter(e => e.category === cat)

const goDetail = (id) => {
  router.push({ name: 'ExerciseDetail', params: { id } })
}
</script>

<style scoped>
.exercise-list-page {
  min-height: 100vh;
  background: #f7f8fa;
}
.category-tabs {
  margin-top: 8px;
}
.exercise-list {
  padding: 8px 0;
}
</style>
